<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html">
    <head>
			<meta charset="utf-8"/>
			<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
			<title>Matrimony | Services</title>
			<link href="css/style-service.css" rel="stylesheet" type="text/css"/>
			<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		    <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
		    <script type="text/javascript">
		        $(document).ready(function(){
					$("#slide").cycle({ 
						fx:    'fade', //Hiệu ứng - Xem thêm các hiệu ứng tại đây: http://jquery.malsup.com/cycle/browser.html
						speed:  1000, //Tốc độ diễn ra hiệu ứng
						timeout: 3000, //3 giây: Thời gian thay đổi giữa các hình 1/1000 giây
						next:  '.next',
						prev:  '.prev'
					});
				});
		    </script>

			<link href="css/bootstrap.css" rel="stylesheet" media="screen"/>
			<link rel="stylesheet" href="css/style.css"/>

		   <style>
				
				p, b {
					margin-bottom:15px;
					font-size: 1.2em;
					line-height: 1.5em;
				}
				
				.tabs li {
					list-style:none;
					display:inline;
				}
				.tabs a {
					padding:5px 50px;
					display:inline-block;
					background:#666;
					color:#fff;
					text-decoration:none;
				}
				.tabs a.active {
					background:#fff;
					color:#444444;
				}
				.credit{
					float: right;
					margin: -53px 11px;
				}
			</style>

			<!--<script src="js/jquery.min.js"></script>-->
			<script>
				// Wait until the DOM has loaded before querying the document
				$(document).ready(function(){
				$('ul.tabs').each(function(){
				// For each set of tabs, we want to keep track of
				// which tab is active and it's associated content
				var $active, $content, $links = $(this).find('a');
				// If the location.hash matches one of the links, use that as the active tab.
				// If no match is found, use the first link as the initial active tab.
				$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
				$active.addClass('active');
				$content = $($active.attr('href'));
				// Hide the remaining content
				$links.not($active).each(function () {
				$($(this).attr('href')).hide();
				});
				// Bind the click event handler
				$(this).on('click', 'a', function(e){
				// Make the old tab inactive.
				$active.removeClass('active');
				$content.hide();
				// Update the variables with the new link and content
				$active = $(this);
				$content = $($(this).attr('href'));
				// Make the tab active.
				$active.addClass('active');
				$content.show();
				// Prevent the anchor's default click action
				e.preventDefault();
						});
					});
				});
			</script>
	</head>
	<body>
		<div id="page-wrap">
			<div id="top-page">
				<div class="search">
				</div><!--End serach-->
			</div><!--End top page-->

			<div id="banner">
				<h1><a href="#">Matrimony</a></h1>
			</div><!--End banner-->
			<div id="main-content">
				<div id="sidebar">
					<h:form>
                    <div id="mainNav">
                        <ul>
                             <li><h:commandLink action="#{matrinonyBean_c.gotoHome()}" value="Home"/></li>
                            <li><h:commandLink action="#{matrinonyBean_c.gotoRegister()}" value="Register"/></li>
                            <li><h:commandLink action="#{matrinonyBean_c.gotoSearch()}" value="Search"/></li>
                            <li><h:commandLink action="#{matrinonyBean_c.gotoService()}" value="Service"/></li>
                            <li><h:commandLink action="#{matrinonyBean_c.gotoContact()}" value="Contact"/></li>
                        </ul>
                    </div><!--End mainNav-->
                    </h:form>
					<br/>
				</div><!--End sidebar-->

				<div id="primary">
					<div class="post-item">
						<h1><a href="#">SERVICES</a></h1><br/>
							<ul class="tabs">
								<li>
									<b><a class="active" href="#tab1">NEWS</a></b>
								</li>
								<li>
									<b><a href="#tab2">ADVERTISEMENT</a></b>
								</li>
								<li>
									<b><a href="#tab3">PAYMENT</a></b>

								</li>
							</ul>

							<div id="tab1">
								
							<div id="news">
							    <div id="slide-panel">
									<div id="slide">
										<div>
											<img src="images/news/1.jpg" alt="Picture 1" />
											<div>
												<h3><a href="http://www.bbc.co.uk/news/entertainment-arts-25178851" target="_blank">Fast and Furious actor Paul Walker mourned</a></h3><br/>
												<p>(Cinema) Fans, friends and fellow stars have been paying tribute to US actor Paul Walker, who has died in a car crash.</p>
											</div>
										</div><!-- end slide 1-->
										<div>
											<img src="images/news/2.jpg" alt="Picture 2" />
											<div>
												<h3><a href="http://www.bbc.co.uk/news/health-25156510" target="_blank">'Memories' pass between generations</a></h3><br/>
												<p>Behaviour can be affected by events in previous generations which have been passed on through a form of genetic memory, animal studies suggest.</p>
											</div>
										</div><!-- end slide 2-->
										<div>
											<img src="images/news/3.jpg" alt="Picture 3" />
											<div>
												<h3><a href="http://www.bbc.co.uk/news/science-environment-25163113" target="_blank">Indian probe begins journey to Mars</a></h3>
											<br/>
												<p>(Science) - India's mission to Mars has embarked on its 300-day journey to the Red Planet. </p>
											</div>
										</div><!-- end slide 3-->
										<div>
											<img src="images/news/4.jpg" alt="Picture 4" />
											<div>
												<h3><a href="http://www.bbc.co.uk/news/uk-scotland-glasgow-west-25179128" target="_blank">Glasgow helicopter crash: Ninth body recovered</a></h3>
											<br/>
												<p>(News) - A ninth body has been recovered in the wreckage of a Glasgow pub that was destroyed by a police helicopter. </p>
											</div>
										</div><!-- end slide 4-->
										<div>
											<img src="images/news/5.jpg" alt="Picture 5" />
											<div>
												<h3><a href="http://www.bbc.co.uk/news/business-25180693" target="_blank">ANZ class action suit set to begin in Australia</a></h3>
											<br/>
												<p>(Business) - A class action suit filed against Australia and New Zealand Banking Group (ANZ), one of Australia's big four banks, is set to begin on Monday. </p>
											</div>
										</div><!-- end slide 5-->
										<div>
											<img src="images/news/6.jpg" alt="Picture 6" />
											<div>
												<h3><a href="http://www.bbc.co.uk/sport/0/football/25179320" target="_blank">Rene Meulensteen says Fulham need new players to stay up</a></h3>
											<br/>
												<p>(Sport) - Rene Meulensteen says Fulham must spend in the January transfer window to give themselves a chance of staying in the Premier League. </p>
											</div>
										</div><!-- end slide 6-->
										<div>
											<img src="images/news/7.jpg" alt="Picture 7" />
											<div>
												<h3><a href="http://www.bbc.com/culture/story/20130719-exciting-housing-innovations" target="_blank">Can Europe’s new designs help the UK’s housing crisis?</a></h3>
											<br/>
												<p>(Culture) - As the UK faces a housing crisis, The Culture Show travels across Europe to find the latest architectural movements which could provide a solution. </p>
											</div>
										</div><!-- end slide 7-->
										<div>
											<img src="images/news/8.jpg" alt="Picture 8" />
											<div>
												<h3><a href="http://www.bbc.com/future/story/20131127-secret-to-thinking-like-a-genius" target="_blank">Why science needs imagination and beauty</a></h3>
											<br/>
												<p>(Future) - How do the best scientists solve life’s greatest mysteries? A Nobel Prize winner takes you inside his mind and explains why the key is imaginative play. </p>
											</div>
										</div><!-- end slide 8-->
										<div>
											<img src="images/news/9.jpg" alt="Picture 9" />
											<div>
												<h3><a href="http://www.bbc.co.uk/news/world-europe-25180502" target="_blank">Ukraine unrest: Protesters in stand-off over EU deal</a></h3>
											<br/>
												<p>(News) - Hundreds of protesters are camped out in Ukraine's capital, Kiev, preparing for fresh demonstrations demanding that President Viktor Yanukovych step down. </p>
											</div>
										</div><!-- end slide 9-->
										<div>
											<img src="images/news/10.jpg" alt="Picture 10" />
											<div>
												<h3><a href="http://www.bbc.co.uk/news/technology-25180906" target="_blank">Amazon testing drones for deliveries</a></h3>
											<br/>
												<p>(Technology) - Amazon, the world's largest online retailer, is testing unmanned drones to deliver goods to customers, according to Chief Executive Jeff Bezos. </p>
											</div>
										</div><!-- end slide 10-->
									</div>
									<div class="button">
										<span class="prev">Prev</span><span class="next">Next</span></div>
								</div>
							</div>
							
							</div>
							<div id="tab2" style="display: none;">
								<br/><h3><b>Advertisement Infortion on here</b></h3>
								<p>Load advertisement from DB to here.</p>
							</div>
							<div id="tab3" style="display: none;">
								<br/><h3><b>Update Payment Details</b></h3>
								
									<div class="">
										<div class="control-group">
			                            <div class="controls">
			                            	<label>Card Number :</label>
			                    			<input aria-invalid="false" class="form-control" placeholder="---- ---- ---- ----" required="" data-validation-required-message="Please enter your card number" type="text" maxlength="16"/>
			                    		<div class="help-block"></div>
			                            </div>
				                	    </div> 
				                	    <div class="control-group">
				                            <div class="controls">
				                            	<label>Security Code :</label>
				                    			<input aria-invalid="false" class="form-control" placeholder="----"  required="" data-validation-required-message="Please enter your sercurity code" type="text" maxlength="4"/>
				                    		<div class="help-block"></div>
				                            </div>
				                	    </div>
				                	    <img src="images/pp.png" alt="credit card"/> 
									<button type="submit" class="btn btn-primary pull-right">Update Credit Code</button>
								
								</div>
							</div>
						</div><!--End post-item-->
				</div><!--End primary-->
			</div><!--End main content-->

			<div id="footer">
				<h:form>
                <div id="footerNav">
                    <p class="copyright">Copyright 2013 Group 3 - C1103L - Matrimony site .</p>
                    <ul>
                        <li><h:commandLink action="#{matrinonyBean_c.gotoHome()}" value="Home"/></li>
                            <li><h:commandLink action="#{matrinonyBean_c.gotoRegister()}" value="Register"/></li>
                            <li><h:commandLink action="#{matrinonyBean_c.gotoSearch()}" value="Search"/></li>
                            <li><h:commandLink action="#{matrinonyBean_c.gotoService()}" value="Service"/></li>
                            <li><h:commandLink action="#{matrinonyBean_c.gotoContact()}" value="Contact"/></li>
                    </ul>

                </div><!--End footerNav-->
                </h:form>
				<div id="footerInfo">
					<img src="images/author.png" alt="author comment" />
					<div class="rules">
						<div class="inside">
							<p>
								The wedding event is no more a home manageable affairs where one requires the different service providers to be contacted and negotiated. Furthermore, the precious time and resources consumed during the whole process of finding and searching the ideal match. In Today’s generation the search of the life partner is searched through internet. The candidate can input his/her requirement according to their needs and perform search operation to get their Ideal Match. This process has now gain success it is less time consuming and multiple searches can be implemented in less time.
							</p>
							<ol>
								<li>If you want to <a href="search.html">look for</a> groom or bride , please go to <a href="index.html">Matrimony</a> site .</li>
								<li><a href="contact.html">Contact us</a> when you have any questions nedd answer .</li>
								<li>Please <a href="register.html">register</a> to experience .</li>
							</ol>
							
							<p><a href="index.html">That's it! Enjoy your stay and remember to comeback often.</a></p>
						</div><!--End inside-->
					</div><!--End rules-->
				</div><!--End footerInfo-->
			</div><!--End footer-->
		</div><!--End page wrap-->
	</body>
</html>
